<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/partner/news'}">品牌案例内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>内容详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="detail-form mt-30" ref="form" :model="form" label-width="150px" style="width: 800px;">
          <div>
            <div class="fl-l">
              <el-form-item label="课程类型：" prop="contentType">
                <span v-if="form.contentType == 1">图文课程</span>
                <span v-if="form.contentType == 2">视频课程</span>
              </el-form-item>
              <el-form-item label="课程标题：" prop="courseTitle" :rules="[ { required: true, message: '标题不能为空'}]">
                <span>{{form.courseTitle}}</span>
              </el-form-item>
            </div>
            <div class="fl-l">
              <el-form-item label="课程分类：" v-if="form.courseTypeId">
                <span>{{courseTypeName}}</span>
              </el-form-item>
              <el-form-item label="是否精选：" prop="isEssence">
                <span v-if="form.isEssence == 1">是</span>
                <span v-if="form.isEssence == 2">否</span>
              </el-form-item>
            </div>
            
            <div class="fl-l" :class="form.courseTitleImage == '' && form.courseTitlePhoneImage =='' ? '' :'h-200'">
              <el-form-item label="pc封面图：" prop="courseTitleImage">
                <div class="avatar-uploader">
                  <img v-if="form.courseTitleImage" :src="form.courseTitleImage" class="avatar">
                </div>
              </el-form-item>
              <el-form-item label="手机封面图：" prop="courseTitlePhoneImage">
                <img :src="form.courseTitlePhoneImage" alt="" class="avatar" v-if="form.courseTitlePhoneImage">
              </el-form-item>
            </div>
            <div class="fl-l">
              <el-form-item label="是否首推：" prop="isHpage">
                <span>{{form.isHpage == 1 ? '是' : '否'}}</span>
              </el-form-item>
              
              <el-form-item label="排序：" prop="sort">
                <span>{{form.sort}}</span>
              </el-form-item>
            </div>
            <el-form-item label="课程描述：" prop="description">
              <div>{{form.description}}</div>
            </el-form-item>
            <el-form-item label="关键字：" prop="seoKeyword">
              <div>{{form.seoKeyword}}</div>
            </el-form-item>
            <el-form-item label="备注：" prop="memo">
              <div>{{form.memo}}</div>
            </el-form-item>
          </div>
          <el-form-item label="课程内容：" prop="content">
            <div class="img-box" style="width:700px" v-html="form.content"></div>
          </el-form-item>

          <el-form-item label="pdf转图片：" prop="pdfToPage">
            <div class="img-box" style="width:700px" v-html="form.pdfToPage"></div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {},
        content: '',
        courseTypeList: [],
        courseTypeName: '',
      }
    },
    activated() {
      this.loadCourseType()
    },
    created() {
      this.loadCourseType()
    },
    methods: {
      loadCourseType() {
        this.$api.courseType.getList({}).then(res => {
          if(res.success){
            this.courseTypeList = res.data
            this.loadData()
          }
        })
      },
      loadData() {
        this.form.courseInfoId = this.$route.params.id
        this.$api.course.getDetail(this.form.courseInfoId).then(res => {
          if(res.success) {
            this.form = res.data
            this.courseTypeList.forEach(item => {
              if(this.form.courseTypeId == item.courseTypeId){
                this.courseTypeName = item.courseName
              }
            })
          }
        })
      },
      goEdit() {
        this.$router.push('/partner/news/edit/' + this.form.courseInfoId)
      },

      onReset() {
        this.$refs.form.resetFields()
      },
      onEditorChange(editor) {
        this.form.content = this.content
        // console.log('editor blur!', editor)
      },
      changeCourseType(val) {
        this.form.courseTypeId = val[1]
      }
    }
  }
</script>
<style lang="less">
 .img-box{
   p{
     width: 100%;
     img{
        width: 100%;
      }
   }
   
 }
</style>